<template>
    <orh-table reload  @on-reload="reload" add="add" @on-add="moralAdd" del="del" @on-del="prompt = true" pages :pageDate="pageDate" @on-page-change="queryData">

        <Table border stripe  :columns="columns" :data="data" @on-selection-change="selectOne" slot="table" :loading="tableload"></Table>

        <orh-sidebar v-model="show" :title="titles" scale slot="others">
            <component :is="content" :condition="condition" @requery="requery"></component>
        </orh-sidebar>

        <Modal v-model="prompt" title="数据删除" :loading="true" @on-ok="delSubmit" slot="others">
            <p>您确定要删除这些数据吗?</p>
        </Modal>

    </orh-table>
</template>
                
<script>
export default {
    name: "basicmodule-schoolcampus",
    layout:'menu',
    components: {
        Operation: resolve => {require(['./Operation.vue'], resolve);},
    },
    data () {
        return {
            tableload: true,
            prompt: false,
            show: false,
            content: null,
            titles: null,
            condition: null,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            data: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '校区名称',
                    minWidth: 150,
                    align:'center',
                    render: (h, params) => {
                        let property = params.row.campus_name.zh?params.row.campus_name.zh:params.row.campus_name.mn
                        return h('div', property);
                    },
                },
                {
                    title: '校区管理人',
                    minWidth: 150,
                    align:'center',
                    render: (h, params) => {
                        let property = params.row.campus_manager.zh?params.row.campus_manager.zh:params.row.campus_manager.mn
                        return h('div', property);
                    },
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                directives: [
                                    {
                                        name: "button",
                                        value: "edit"
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.UpdateData(params.row.campus_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: '您确定要删除这条数据吗?',
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.campus_id)
                                    }
                                }
                            }, [
                                h('Button', {
                                    directives: [
                                        {
                                            name: "button",
                                            value: "del"
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                    }
                                }, '删除')
                            ]),
                        ]);
                    }
                },
            ],
            url: 'api/buildings/v1/campus/index?page=',
            delUrl: 'api/buildings/v1/campus/delete/',
            del: null,
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        moralAdd() {
            this.condition = false
            this.titles = '添加数据'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 单条数据删除
         * @param   {index}           要删除的数据id
         * 
         ************************************************************/
        remove (index) {
            this.del = []
            this.del.push(index)
            this.delSubmit()
        },
        
        /************************************************************
         * 
         * 批量数据删除
         * @param   {index}            要删除的数据id[array]
         * 
         ************************************************************/
        selectOne(index){
            this.del = []
            index.forEach(item => {
                this.del.push(item.campus_id)
            });
        },
        
        /************************************************************
         * 
         * 执行删除
         * 
         ************************************************************/
        delSubmit () {
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl + this.del).then(val=>{
                this.prompt = false
                this.reload (this.pageDate.current_page)
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 添加或修改数据成功之后刷新数据
         * @param   {state}            操作状态
         * 
         ************************************************************/
        requery (state) {
            if(state == true){
                this.show = false
                this.reload (this.pageDate.current_page)
            }
        },
        
        /************************************************************
         * 
         * 修改数据
         * @param   {index}            要修改的数据id
         * 
         ************************************************************/
        UpdateData (index) {
            this.condition = index
            this.titles = '修改数据'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 刷新数据
         * @param   {index}            分页
         * 
         ************************************************************/
        reload (index) {
            this.data = []
            this.tableload = true
            this.queryData (index?index:1)
        },
        
        /************************************************************
         * 
         * 列表数据
         * @param   {index}            分页
         * 
         ************************************************************/
        queryData(index){
            this.$http.get(this.url + index).then(val=>{
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },
    },
    mounted(){
        this.reload ()
    },
}
</script>